<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>未命名</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #app{
      width: 100%;
      height: 100%;
      display: block;
      overflow: scroll;
    }
    .content{
      /*display: flex;*/
    }
    .row{
      display: flex;
      width: 100%;
    }
    .card{
      width: 45%;
      height: 30vh;
      margin: 10px;
      background: #eee;
    }
    .card.active{
      background: #00ffd5;
    }
    .config{
      padding: 10px;
    }
    .choose{
      display: flex;
    }
    .choose-box{
      margin-right: 20px;
    }
    .hidden{
      display: none;
    }
    .intervalTime{
    }
    #start-button{
      color: #fff;
      height: 35px;
      border: none;
      background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
      width: 100%;
      margin-top: 10px;
    }
    #save{
      width: 100%;
      margin-top: 10px;
    }

  </style>
</head>
<body>
<div id="app">
  <div class="content">
    <div class="row">
      <div class="card"></div>
      <div class="card"></div>
    </div>
    <div class="row">
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
  <div class="config">
    <div>
      亮度维持时间(秒)
      <input value="1" type="number" id="stayTime">
    </div>
    <div>相邻两次间隔时间模式</div>
    <div class="choose">
      <div class="choose-box">
        <input class="radio" type="radio" id="yes" name="choose" checked/>
        <label for="yes">可调</label>
      </div>
      <div class="choose-box">
        <input class="radio" type="radio" id="no" name="choose" />
        <label for="no">不可调</label>
      </div>
    </div>
    <div class="intervalTime">
      相邻两次间隔时间(秒)
      <input value="2" type="number" id="intervalTime">
    </div>
    <div class="no-modify">
      <span>当前随机间隔时间：</span>
      <span class="random-time"></span>
    </div>
    <button id="start-button">执行</button>
    <button id="save">保存配置</button>
  </div>
</div>
<script>
  let interval = null
  let checked = 'yes'
  setConfig()
  const cardList = document.querySelectorAll('.card')
  const startBtn = document.querySelector('#start-button')
  const saveBtn = document.querySelector('#save')
  const radios = document.querySelectorAll('.radio')
  radios.forEach(radio=>{
    radio.addEventListener('change', (evt)=>{
      const id = evt.target.id
      const intervalTimeDom = document.querySelectorAll('#intervalTime')
      const intervalTimeContainer = document.querySelector('.intervalTime')
      const randomTimeContainer = document.querySelector('.no-modify')
      if (id === 'yes') {
        checked = "yes"
        intervalTimeDom.value = 2
        intervalTimeContainer.classList.remove('hidden')
        randomTimeContainer.classList.add('hidden')
      } else {
        intervalTimeDom.value = ''
        checked = 'no'
        intervalTimeContainer.classList.add('hidden')
        randomTimeContainer.classList.remove('hidden')
      }
    })
  })
  startBtn.addEventListener('click', ()=>{
    const stayTimeDom = document.querySelector('#stayTime')
    const StayTime = stayTimeDom.value
    if (!StayTime) {
      alert('请填写亮度维持时间')
      return;
    } else if (StayTime>1) {
      alert('亮度维持时间不能超过1秒')
      return;
    } else if (StayTime < 0) {
      alert('亮度维持时间不能小于0')
      return;
    }
    const intervalTimeDom = document.querySelector('#intervalTime')
    const intervalTimeValue = intervalTimeDom.value
    if (checked === 'yes' && !intervalTimeValue) {
      alert('请填写相邻两次间隔时间')
      return;
    } else if (intervalTimeValue>2) {
      alert('相邻两次间隔时间不能超过2秒')
      return;
    } else if (intervalTimeValue < 0) {
      alert('相邻两次间隔时间不能小于0')
      return;
    }
    let intervalTime = intervalTimeValue
    run(StayTime, intervalTime)
  })
  saveBtn.addEventListener('click', ()=>{
    const StayTime = document.querySelector('#stayTime').value
    const intervalTime = document.querySelector('#intervalTime').value
    if (!StayTime) {
      alert('请填写亮度维持时间')
      return;
    } else if (StayTime>1) {
      alert('亮度维持时间不能超过1秒')
      return;
    } else if (StayTime < 0) {
      alert('亮度维持时间不能小于0')
      return;
    }
    if (checked === 'yes' && !intervalTime) {
      alert('请填写相邻两次间隔时间')
      return;
    } else if (intervalTime>2) {
      alert('相邻两次间隔时间不能超过2秒')
      return;
    } else if (intervalTime < 0) {
      alert('相邻两次间隔时间不能小于0')
      return;
    }
    const config = {
      StayTime,
      intervalTime,
      checked
    }
    localStorage.setItem('config', JSON.stringify(config))
    alert('保存成功')
  })

  function run(stayTime, intervalTime) {
    cardList.forEach(card=> card.classList.remove('active'))
    clearInterval(interval)
    const intervalTimeAdapter = () => {
      const randomTimeDom= document.querySelector('.random-time')
      if (checked === 'no') {
        intervalTime = Math.random() + 1
        randomTimeDom.innerHTML = intervalTime
        return intervalTime * 1000;
      } else {
        randomTimeDom.innerHTML = ''
        return intervalTime * 1000;
      }
    }
    console.log(intervalTime, stayTime);
    one(stayTime)
    // 动态间隔时间函数
    function intervalFn() {
      one(stayTime)
      clearInterval(interval)
      interval = setInterval(intervalFn, intervalTimeAdapter())
    }
    interval = setInterval(intervalFn, intervalTimeAdapter())
  }
  function one(stayTime) {
    const index = Math.floor(Math.random()*4)
    const classList = cardList[index].classList
    const hasActive = classList.contains('active')
    if (!hasActive) {
      classList.add('active')
    }
    setTimeout(()=>{
      classList.remove('active')
    }, stayTime * 1000)
  }
  function setConfig() {
    const configString = localStorage.getItem('config')
    if (configString) {
      const config = JSON.parse(configString)
      const stayTimeDom = document.querySelector('#stayTime')
      stayTimeDom.value = config.StayTime
      const intervalTimeDom = document.querySelector('#intervalTime')
      intervalTimeDom.value = config.intervalTime
      checked = config.checked
      const radioDom = document.querySelector('#'+ config.checked)
      radioDom.checked = 'checked'
      const intervalTimeContainer = document.querySelector('.intervalTime')
      const randomTimeContainer = document.querySelector('.no-modify')
      if (checked === 'yes') {
        intervalTimeContainer.classList.remove('hidden')
        randomTimeContainer.classList.add('hidden')
      } else {
        intervalTimeContainer.classList.add('hidden')
        randomTimeContainer.classList.remove('hidden')
      }
    }
  }
</script>
</body>
</html>
